<template>
  <div class="template-wrap">
    <div class="icon-mod" @click="toBack">
      <i class="el-icon-back"></i>
    </div>
    <iframe class="ifram-wrapper" :src="iframeSrc" width="100%" height="100%"> </iframe>
  </div>
</template>

<script>
import { getExternalLink } from '@common/api/staff';
export default {
  data() {
    return {
      iframeSrc: '',
    };
  },
  props: {
    userId: {
      type: String,
      default() {
        return '';
      },
    },
  },
  created() {
    const { flowId = '' } = this.$route.query;
    getExternalLink({
      Module: 'DOCUMENT',
      ModuleId: flowId,
      MenuStatus: 'DISABLE',
    }).then(data => {
      this.iframeSrc = data?.data?.ConsoleUrl;
    });
  },
  methods: {
    // 返回列表
    toBack() {
      const { fromPath } = this.$route.query;
      this.$router.push({
        path: fromPath,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.template-wrap {
  position: absolute;
  top: 94px;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 20px;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  background-color: #fff;
  overflow: hidden;
  color: #303133;
  transition: 0.3s;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);

  .icon-mod {
    position: absolute;
    top: 13px;
    left: 15px;
    z-index: 9;
    display: inline-block;
    width: 26px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    background: #fff;
    cursor: pointer;
    .el-icon-back {
      font-size: 20px;
      font-weight: bold;
      color: #2772f6;
    }
  }
}
.ifram-wrapper {
  top: -50px;
  left: 1px;
  bottom: 0;
  height: 100%;
}
</style>


